import React from 'react';
import { FaStar, FaHeart, FaDollarSign, FaBriefcase, FaHeartbeat } from 'react-icons/fa';


const FortuneCard = ({ fortuneData }) => {
  // 辅助函数：将指数转换为百分比显示
  const getPercentage = (value) => `${value}`;

  return (
    <div className="fortune-card-container w-full bg-gradient-to-br from-purple-900/90 to-indigo-900/90 py-4 overflow-y-auto">
      <div className="fortune-card w-80 mx-auto bg-gradient-to-br from-purple-900/90 to-indigo-900/90 rounded-xl shadow-xl text-white transform hover:scale-105 transition-all duration-300">
        {/* 标题区域 */}
        <div className="p-4 border-b border-purple-700/50">
          <h2 className="text-lg font-bold text-center flex items-center justify-center gap-2">
            <FaStar className="text-yellow-400 text-sm" />
            {fortuneData.title}(今日的运势)
          </h2>
          <p className="text-center mt-1 text-purple-200 italic text-xs">{fortuneData.shortcomment}</p>
        </div>

        {/* 运势指数区域 */}
        <div className="p-4">
          <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
            <span className="h-1 w-6 bg-gradient-to-r from-pink-500 to-purple-500 rounded"></span>
            运势指数
          </h3>
          <div className="space-y-2">
            {[
              { icon: FaStar, label: '整体', value: fortuneData.index.all },
              { icon: FaHeartbeat, label: '健康', value: fortuneData.index.health },
              { icon: FaHeart, label: '爱情', value: fortuneData.index.love },
              { icon: FaDollarSign, label: '财富', value: fortuneData.index.money },
              { icon: FaBriefcase, label: '工作', value: fortuneData.index.work },
            ].map((item, index) => (
              <div key={index} className="flex items-center gap-2">
               
                <div className="flex-1">
                  <div className="flex justify-between text-xs mb-1">
                     <item.icon className="text-pink-400 text-xs" />
                    <span>{item.label}</span>
                    <span>{getPercentage(item.value)}</span>
                  </div>
                  <div className="w-full bg-purple-800/50 rounded-full h-1.5">
                    <div
                      className="bg-gradient-to-r from-pink-500 to-purple-500 h-1.5 rounded-full transition-all duration-500"
                      style={{ width: getPercentage(item.value) }}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 运势分析区域 */}
        <div className="p-4 bg-purple-800/20">
          <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
            <span className="h-1 w-6 bg-gradient-to-r from-pink-500 to-purple-500 rounded"></span>
            运势分析
          </h3>
          <p className="text-purple-100 leading-relaxed text-xs mb-1">{fortuneData.fortunetext.health}</p>
          <p className="text-purple-100 leading-relaxed text-xs mb-1">{fortuneData.fortunetext.love}</p>
          <p className="text-purple-100 leading-relaxed text-xs mb-1">{fortuneData.fortunetext.money}</p>
          <p className="text-purple-100 leading-relaxed text-xs">{fortuneData.fortunetext.work}</p>
        </div>

        {/* 幸运元素区域 */}
        <div className="p-4 grid grid-cols-3 gap-3 text-center bg-purple-900/30">
          <div>
            <h3 className="text-xs font-semibold text-pink-300">幸运色</h3>
            <div
              className="w-6 h-6 mx-auto mt-1 rounded-full border-2 border-purple-500 shadow-lg"
              style={{ backgroundColor: fortuneData.luckycolor }}
            />
            <p className="mt-1 text-xs">{fortuneData.luckycolor}</p>
          </div>
          <div>
            <h3 className="text-xs font-semibold text-pink-300">幸运星座</h3>
            <p className="mt-1 text-purple-100 text-xs">{fortuneData.luckyconstellation}</p>
          </div>
          {/* <div>
            <h3 className="text-xs font-semibold text-pink-300">幸运数字</h3>
            <p className="mt-1 text-lg font-bold text-yellow-400">{fortuneData.luckynumber}</p>
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default FortuneCard;